<template>
  <div class="bg">
    <div class="container">
      <div class="label-item">
        <span class="label-list">艺术涂料十大品牌｜</span>
        <span class="label-list">艺术涂料｜</span>
        <span class="label-list">艺术墙绘｜</span>
        <span class="label-list">艺术墙艺｜</span>
        <span class="label-list">进口艺术涂料｜</span>
        <span class="label-list">艺术涂料加盟｜</span>
        <span class="label-list">墙艺师培训</span>
      </div>
      <div class="box-item">
        <div class="contact box-list">
          <h3>联系我们</h3>
          <div class="contact-info">
            <p>长沙美家乐装饰材料有限公司</p>
            <p>地址：湖南省长沙市开福区香江红星美凯龙A馆</p>
            <p>邮编：410005</p>
            <p>产地：广东省佛山市顺德区勒流富安工业区</p>
          </div>

        </div>
        <div class="official box-list">
          <h3>官方资源</h3>
          <div class="code-item">
            <div class="vr box-list ">
              <p>VR软件</p>
              <img src="../../../assets/images/code/vrcode.png" alt="">
            </div>
            <div class="wei box-list">
              <p>微信公众号</p>
              <img src="../../../assets/images/code/weixingcode.png" alt="">
            </div>
            <div class="vr box-list">
              <p>官方抖音</p>
              <img style="width:93px;height:auto;" src="@/assets/images/erweima/douyin_03.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="service box-list">
          <h3>24小时服务</h3>
          <p class="phone">400 100 8952</p>
        </div>
      </div>
      <!-- 版权 -->
      <span class="copyright">懒精灵艺术涂料官方网站 ©版权所有 湘ICP备2021005593号</span>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='less' scoped>
.container {
  // height: 500px;
  padding-top: 30px;
  .label-item {
    color: #8db83c;
    .label-list {
      line-height: 30px;
    }
  }
  .box-item {
    display: flex;
    color: #fff;
    margin-bottom: 50px;
    .box-list {
      flex: 1;
      padding-right: 20px;

      h3 {
        color: #8db83c;
        padding-bottom: 10px;
        border-bottom: 2px solid #8db83c;
      }
      .code-item {
        display: flex;
      }
    }
  }
  .copyright {
    color: #fff;
  }
}
.phone {
  font-size: 2rem;
  font-weight: 500;
  line-height: 0;
}

@media only screen and (max-width: 786px) {
  .label-item {
    text-align: center;
  }
  .box-item {
    flex-direction: column;
    align-items: center;
  }
  .copyright {
    display: block;
    text-align: center;
  }
}
</style>